// JavaScript Document
//1.08版本的插件
((function(a){
	var KuoqiSlide  = function(opts){
		this.opts = $Q.opts(opts,{
			element:null,//盒子元素的相关信息
			data:[],//内部的数据信息
		});
		this.library = {
			data:[],
			index:0,//当前播放的序号信息
		};
		//组合一个元素的信息进入到列表中
		
		//元素集合信息
		this.format = {element:this.opts.element,ctli:[]};
		
		//进入dom的元素信息
		this.joinDom = function(){
			a.selector(this.format.element).html(this.format.box);
			this.pushWin();
		}
		
		//推送一个到显示窗口中
		this.pushWin = function(){
			var item = this.library.data[this.library.index];
			this.format.winele.attr('src',item.image);
			if(item.url){
				this.format.win.attr('href',item.url);
			}else{
                this.format.win.attr('href','javascript:;');
			}
			this.format.win.html(this.format.winele);
			item.showLi();
		}
		
		//播放上一个
		this.playPrev = function(){
			if(this.library.index==0){
				this.library.index = this.library.data.length - 1;
			}else{
				this.library.index --;	
			}
			this.pushWin();
		}
		//播放下一个
		this.playNext = function(){
			if(this.library.data.length == this.library.index + 1){
				this.library.index = 0;
			}else{
				this.library.index ++;	
			}
			this.pushWin();
		}
		
		//初始化事件信息
		this.formatEvent = function(){
			var ths = this;
			this.format.prevbtn.on('click',function(){
				ths.playPrev();	
			});
			this.format.nextbtn.on('click',function(){
				ths.playNext();	
			});
			//右侧的鼠标进入
			this.format.nextbtn.on('mouseenter',function(){
				a(this).css("background-image","linear-gradient(270deg, black, transparent)");
			});
			this.format.nextbtn.on('mouseout',function(){
				a(this).css("background-image","unset");	
			});
			//左侧鼠标进入
			this.format.prevbtn.on('mouseenter',function(){
				a(this).css("background-image","linear-gradient(90deg, black, transparent)");	
			});
			this.format.prevbtn.on('mouseout',function(){
				a(this).css("background-image","unset");	
			});
		}
		
		this.createElement = function(){
			//盒子区域
			this.format.box = $Q('<div></div>');
			//内容区域
			this.format.win = $Q('<a target="new"></a>');
			this.format.winele = $Q('<img />');
			//控制盒子
			this.format.ctlbox = $Q('<div></div>');
			//列表的li信息
			this.format.ctlli = $Q('<div></div>');
			//向上按钮
			this.format.prevbtn = $Q('<div></div>');
			//向下按钮
			this.format.nextbtn = $Q('<div></div>');
		}
		
		//创建UI卡片信息
		this.createUI = function(){
			//关系信息
			//css的相关信息
			this.format.box.css({
				"position":"relative",
				"width":"100%",
				"height":"100%",
			});
			
			this.format.win.css({
				"position":"absolute",
				"top":"0",
				"right":"0",
				"bottom":"0",
				"left":"0",
			});
			this.format.ctlbox.css({
				"position":"absolute",
				"right":"0",
				"bottom":"0",
				"left":"0",
				"padding":"0.5rem",
				"text-align":"center",
			});
			this.format.winele.css({
				"object-fit":"fill",
				"width":"100%",
				"height":"100%",
			});
			this.format.prevbtn.css({
				"position":"absolute",
				"height":"100%",
				"left":"0",
				"width":"10%",
				"max-width":"3rem",
				"min-width":"1rem",
				"cursor":"pointer",
			});
			this.format.nextbtn.css({
				"position":"absolute",
				"height":"100%",
				"right":"0",
				"width":"10%",
				"max-width":"3rem",
				"min-width":"1rem",
				"cursor":"pointer",
			});
			//关系信息二
			
			
			
			this.format.box.append(this.format.win);
			this.format.box.append(this.format.ctlbox);
			
			this.format.box.append(this.format.prevbtn);
			this.format.box.append(this.format.nextbtn);
			//加入的元素中
			this.joinDom();
		}
		
		//数据格式化
		this.formatData = function(){
			var ths = this;
			var itm = function(opts){
				return a.opts(opts,{
					url:'',//跳转的链接
					showLi : function(){
						this.element.css("background-color","#ffffff");	
						this.element.siblings().css("background-color","#ffffff80");
					},
					//图片的资源的初始化
					initImage:function(){
						var ths = this;
						a.ajax({
							url:this.image,
							dataType:'blob',
							type:'get',
							success:function(stream){
								ths.image = window.URL.createObjectURL(stream);
							},
							responseType:'blob',
							header:{},
						});
					}
					},'image');
			};
			var data = this.opts.data;
			for(var i =0;i<data.length;i++){
				var it = new itm(data[i]);
				it.initImage();
				it.element = a('<li data-index="'+i+'" style="display: inline-block;width: 0.5rem;height: 0.5rem;background-color: #ffffff80;border-radius: 50%;cursor:pointer;margin:0 0.25rem;"></li>');
				it.element.on('click',function(){
					ths.library.index = Number(a(this).getData('index'));
					ths.pushWin();
				});
				this.library.data.push(it);
				this.format.ctlbox.append(it.element);
			}
		}
		
		
		this.createElement();
		
		this.formatData();
		
		this.createUI();
		
		this.formatEvent();
		
	};
	a.plugIn.register('slide',KuoqiSlide);
})(this.kuoqiJs))